<template>
  <view class="box">
    <view class="tou top fixed" :style="'padding-top:' + statusBarHeight1 + 'px'">
      <image
        @click="fanhui"
        class="image1"
        src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png"
      />
      <!-- #ifndef MP-WEIXIN -->
      房源信息
      <!-- #endif -->
      <!-- #ifdef MP-WEIXIN -->
      <text
        @click="fanhui"
        style="position: absolute; left: 50%; transform: translateX(-50%)"
        >房源信息</text
      >
      <!-- #endif -->
      <image
        @click="sousuo"
        class="image2"
        src="https://pic.bangbangtongcheng.com/static/sousuo.png"
        mode="widthFix"
      />
    </view>
    <view class="tou top" :style="'padding-top:' + statusBarHeight1 + 'px'"></view>
    <view class="bannerBox" :class="scrollTop != 0 ? 'Ptop' : ''">
      <view class="banner">
        <swiper
          style="min-height: 0rpx; height: 345rpx"
          class="screen-swiper square-dot"
          :indicator-dots="true"
          :circular="true"
          :autoplay="true"
          indicator-active-color="#ffffff"
          interval="5000"
          duration="500"
        >
          <swiper-item
            v-for="(item, index) in bannerList"
            :key="index"
            @click="bannerD(item.id)"
          >
            <image :src="imgUrl + item.image" mode="aspectFill" />
            <view class="byTitle"
              ><span>{{ item.title }}</span></view
            >
          </swiper-item>
        </swiper>
      </view>
    </view>
    <view
      class="cu-list grid col-3 no-border"
      style="margin-left: 30rpx; width: 690rpx; margin-top: 20rpx"
    >
      <view class="cu-item" @click="tiaozhuan(1)">
        <image class="img" src="https://pic.bangbangtongcheng.com/static/fang_1.png" />
        <text style="font-size: 28rpx; color: #333333">二手房</text>
      </view>
      <view class="cu-item" @click="tiaozhuan(2)">
        <image class="img" src="https://pic.bangbangtongcheng.com/static/fang_2.png" />
        <text style="font-size: 28rpx; color: #333333">新房</text>
      </view>
      <view class="cu-item" @click="tiaozhuan(3)">
        <image class="img" src="https://pic.bangbangtongcheng.com/static/fang_3.png" />
        <text style="font-size: 28rpx; color: #333333">出租房</text>
      </view>
    </view>
    <view class="list">
      <view class="tit">推荐房源</view>
      <view
        class="li"
        v-for="(item, index) in Recommend"
        :key="index"
        @click="details(item.id)"
      >
        <image
          mode="aspectFit"
          :src="item.display_diagram ? item.display_diagram : imgUrl + item.house_image"
        />
        <view class="li_1">
          <view class="tits">
            <span class="tagLabel">{{
              item.transaction_type == 1
                ? "出租房"
                : item.new_old == 1
                ? "新房"
                : "二手房"
            }}</span>
            {{ item.title }}
          </view>
          <view>
            <view class="neirong_1">
              <view class="neir_css">{{ item.region }}</view>
              <view class="neir_css">{{ item.cell_name || "" }}</view>
            </view>
            <view class="neirong_1">
              <view class="neir_css">{{
                item.FLOOR
                  ? item.FLOOR.split("|")[0] + "层/共" + item.FLOOR.split("|")[1] + "层"
                  : ""
              }}</view>
              <view class="neir_css">{{ item.house_type || "" }}</view>
            </view>
            <view class="neirong_1">
              <view class="price neir_css" v-if="item.transaction_type == 2"
                >{{ item.price }}万</view
              >
              <view
                class="price neir_css"
                v-if="item.transaction_type == 1 && item.price <= 10000"
                >{{ item.price }}元</view
              >
              <view
                class="price neir_css"
                v-if="item.transaction_type == 1 && item.price > 10000"
                >{{ item.price / 10000 }}万元</view
              >
              <view class="neir_css" style>{{ item.AREA || item.area }}㎡</view>
            </view>
          </view>
        </view>
      </view>
      <view class="down" v-show="!downStatus">没有更多了</view>
    </view>
    <view v-if="scrollTop > 0" class="hui" @click="totop">
      <image src="https://pic.bangbangtongcheng.com/static/top.png" />返回顶部
    </view>
    <view class="zbc" v-if="zbc">
      <view class="tan">
        <view class="text">商家已将您标记为离职，是否同意？</view>
        <view class="xiao">稍后</view>
        <view class="tong">同意</view>
        <view class="guan" @click="guan">×</view>
      </view>
    </view>
    <uniBall></uniBall>
    <!-- <view-tabbar :selected="0"></view-tabbar> -->
  </view>
</template>

<script>
import { mapGetters } from "vuex";
let statusBarHeight;
//#ifdef H5
import wxshare from "../../utils/index.js";
statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 10 + 44;
//#endif
// #ifdef APP-PLUS
statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 10 + 44;
//  #endif
// #ifdef MP-WEIXIN
statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 5 + 88;
//  #endif
import Tabbar from "@/components/tabbar.vue";
export default {
  data() {
    return {
      searchlogType: "",
      statusBarHeight,
      zbc: false,
      bannerList: [],
      textList: [
        {
          type: "image",
          text: "今日房价暴跌，中间有何缘由？",
          id: 1,
        },
        {
          type: "image",
          text: "今日房价暴跌，中间有何缘由？我们一起来探索其中的原由",
          id: 2,
        },
        {
          type: "image",
          text: "今日房价暴跌，中间有何缘由？",
          id: 3,
        },
        {
          type: "image",
          text: "今日房价暴跌，中间有何缘由？我们一起来探索其中的原由",
          id: 4,
        },
      ],
	  userInfo: uni.getStorageSync("Pduser"),
      pageSize: 10,
      pageNo: 1,
      Recommend: [],
      imgUrl: this.$imgSrc,
      showType: false,
      orderSort: "1",
      scrollTop: "0",
      trigger: false,
      downStatus: true,
      upStatus: true,
    };
  },
  components: {
    "view-tabbar": Tabbar,
  },
  computed: {
    ...mapGetters(["statusBarHeight1", "userinfo"]),
  },
  onShow() {
  	this.userInfo = uni.getStorageSync("Pduser");
	},
  onLoad(options) {
    this.getBanner();
    this.getRecommend();
    /* #ifdef H5 */
    this.jinzhi();
    /* #endif */
  },
  filters: {
    nums(val) {
      return val.toFixed(2);
    },
  },

  onPageScroll: function (Object) {
    // console.log(Object.scrollTop); //实时获取到滚动的值
    this.scrollTop = Object.scrollTop;
  },
  async onPullDownRefresh() {
    this.Recommend = [];
    this.pageNo = 1;
    this.downStatus = true;
    if (this.upStatus) {
      this.trigger = true;
      await this.getRecommend();
    }
  },
  onReachBottom() {
    this.down();
  },
  methods: {
    sousuo() {
      // if (!this.userinfo.phone) {
      //   uni.showToast({
      //     title: "请登录",
      //     icon: "none",
      //     mask: true
      //   });
      //   return;
      // }
      uni.navigateTo({
        url: "/pages_search/search?searchlogType=1",
      });
    },
    bannerD(id) {
      uni.navigateTo({
        url: "/pages/index/bannerDetails?id=" + id,
      });
    },
    jinzhi() {
      let _this = this;
      let param = window.location.href.split("#")[0];
      uni.request({
        method: "post",
        data: {
          url: param,
        },
        header: {
          "content-type": "application/x-www-form-urlencoded",
        },
        url: "https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do",
        success(re) {
          _this.jinzhifx(re.data);
        },
      });
    },
    jinzhifx(data) {
      wxshare.config({
        debug: false, //是否打开调试
        appId: data.appId, // 公众号的唯一标识
        timestamp: data.timestamp, // 生成签名的时间戳
        nonceStr: data.nonce, // ，生成签名的随机串
        signature: data.signature, // 签名
        jsApiList: ["hideMenuItems"],
      });
      // 禁止分享
      wxshare.hideMenuItems({
        // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
        menuList: [
          "menuItem:share:appMessage",
          "menuItem:share:timeline",
          "menuItem:share:timeline",
          "menuItem:share:qq",
          "menuItem:favorite",
          "menuItem:share:QZone",
          "menuItem:openWithSafari",
        ],
      });
    },
    guan() {
      this.zbc = false;
    },
    totop() {
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 300,
      });
    },
    down() {
      if (this.downStatus) {
        this.pageNo++;
        this.getRecommend();
      }
    },
    async up() {},
    getRecommend() {
      this.upStatus = false;
      this.$myRequest
        .get("/mob/home/getHouseInfo", {
          pageSize: this.pageSize,
          pageNo: this.pageNo,
		  userIds:this.userInfo.id,
          upStatus: 1,
          isLz: "0",
          examineStatus: 2,
          orderSort: this.orderSort,
        })
        .then((res) => {
          if (!res.list.length) {
            this.downStatus = false;
          }
          this.upStatus = true;
          this.trigger = false;
          res.list.forEach((el) => {
            if (el.house_image) {
              el.house_image = el.house_image.split("|")[0];
            }
            // if (el.hasOwnProperty("FLOOR")) {
            //   if (el.FLOOR.split(",").length == 3) {
            //     el.FLOOR = el.FLOOR.split(",")[1] + "层";
            //   } else {
            //     el.FLOOR = "";
            //   }
            // }
            if (el.hasOwnProperty("FLOOR")) {
              if (el.FLOOR.indexOf("|") != -1) {
                el.FLOOR =
                  el.FLOOR.split("|")[0] + "层/共" + el.FLOOR.split("|")[1] + "层";
              } else {
                el.FLOOR = "";
              }
            }
          });
          this.Recommend = this.Recommend.concat(res.list);
          uni.stopPullDownRefresh();
          // this.userInfo = res.userInfo;
          // uni.setStorageSync("Pduser", res.userInfo);
        });
    },
    getBanner() {
      this.$myRequest
        .get("/mob/home/getBanner", {
          type: "2",
        })
        .then((res) => {
          this.bannerList = res.list;
          // this.userInfo = res.userInfo;
          // uni.setStorageSync("Pduser", res.userInfo);
        });
    },
    tiaozhuan(num) {
      if (num == 1) {
        uni.navigateTo({
          url: "/pages_houses/housing/oldHouse",
        });
      } else if (num == 2) {
        uni.navigateTo({
          url: "/pages_houses/housing/newHouse",
        });
      } else if (num == 3) {
        uni.navigateTo({
          url: "/pages_houses/housing/renting",
        });
      }
    },
    fanhui() {
      uni.navigateBack({
        delta: 1,
      });
    },
    details(id) {
      uni.navigateTo({
        url: "/pages_houses/housing/used/houseDetails?id=" + id,
      });
    },
  },
};
</script>

<style lang="less" scoped>
.zbc {
  position: fixed;
  width: 100%;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 99999;

  .tan {
    position: absolute;
    width: 600rpx;
    height: 300rpx;
    background-color: #fff;
    border-radius: 10rpx;
    top: 34%;
    left: 75rpx;

    .text {
      width: 100%;
      text-align: center;
      margin-top: 80rpx;
      font-size: 34rpx;
    }

    .xiao {
      position: absolute;
      width: 160rpx;
      height: 60rpx;
      background: #ffffff;
      border: 2rpx solid #64b6a8;
      border-radius: 37rpx;
      left: 118rpx;
      bottom: 54rpx;
      text-align: center;
      line-height: 60rpx;
      color: #64b6a8;
    }

    .tong {
      position: absolute;
      width: 160rpx;
      height: 60rpx;
      background: #64b6a8;
      border-radius: 37rpx;
      right: 118rpx;
      bottom: 54rpx;
      text-align: center;
      line-height: 60rpx;
      color: #fff;
    }

    .guan {
      position: absolute;
      width: 58rpx;
      height: 58rpx;
      border: 4rpx solid #ffffff;
      border-radius: 50%;
      left: 50%;
      transform: translateX(-50%);
      bottom: -100rpx;
      text-align: center;
      line-height: 48rpx;
      color: #fff;
      font-size: 54rpx;
    }
  }
}

.box {
  width: 100%;
  padding-bottom: 0rpx;
  background-color: #fff;
}

.tou {
  position: relative;
  width: 100%;
  // height: 88rpx;
  text-align: center;
  /* #ifdef MP-WEIXIN */
  text-align: left;
  display: flex;
  align-items: center;
  /* #endif */
  line-height: 88rpx;
  font-size: 36rpx;
  color: #fff;
  background-color: #64b6a8;

  .image1 {
    position: absolute;
    width: 32rpx;
    height: 32rpx;
    // top: 116rpx;
    left: 30rpx;
  }

  .image2 {
    position: absolute;
    width: 56rpx;
    height: 56rpx;
    bottom: 16rpx !important;
    // top: 116rpx;
    right: 30rpx;
    /* #ifdef MP-WEIXIN */
    position: initial;
    margin-left: auto;
    margin-right: 200rpx;
    /* #endif */
  }
}

.bannerBox {
  width: 100%;
  height: 400rpx;
  background: #64b6a8;
  padding-top: 28rpx;
  margin-top: -4rpx;

  .banner {
    margin-left: 30rpx;
    width: 690rpx;
    height: 346rpx;
    overflow: hidden;
    border-radius: 24rpx;
    .byTitle {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0.1);

      span {
        width: 650rpx;
        padding: 0 20rpx;
        position: absolute;
        bottom: 46rpx;
        font-size: 34rpx;
        font-weight: 500;
        color: #ffffff;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
  }
}

.cu-item .img {
  width: 100rpx;
  height: 100rpx;
  margin-left: 50%;
  transform: translateX(-50%);
}

.cu-item text {
  font-size: 28rpx;
  color: #333333;
}

.Ptop {
  /* #ifdef H5 || APP-PULS */
  // padding-top: 104rpx;
  margin-top: 98rpx;
  /* #endif */

  /* #ifdef MP  */
  // margin-top: 188rpx;
  /* #endif */
}

.fixed {
  // display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 40;
}

.list {
  margin-top: 20rpx;
  margin-left: 30rpx;
  margin-right: 30rpx;
  width: 690rpx;

  .tit {
    color: #333333;
    font-size: 36rpx;
    margin-bottom: 24rpx;
  }

  .li {
    display: flex;
    align-items: center;
    padding-bottom: 30rpx;
    margin-bottom: 30rpx;
    border-bottom: 2rpx solid #e0e0e0;

    image {
      background-color: #f8f8f8;
      width: 300rpx;
      height: 200rpx;
      border-radius: 20rpx;
    }

    .li_1 {
      margin-left: 24rpx;
      height: 200rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .tits {
        width: 366rpx;
        font-size: 36rpx;
        line-height: 44rpx;
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2; //想要的行数
        -webkit-box-orient: vertical;
        margin-bottom: 0;
        .tagLabel {
          vertical-align: top;
          background: #64b6a8;
          color: #fff;
          font-size: 24rpx;
          text-align: center;
          width: 106rpx;
          margin-right: 10rpx;
          padding: 4rpx 6rpx;
          border-radius: 4rpx;
        }
      }

      .neirong_1 {
        width: 366rpx;
        font-size: 24rpx;
        color: #666666;
        display: flex;
        align-items: center;
        .price {
          color: red;
          font-size: 30rpx;
          font-weight: 600;
        }
        .neir_css {
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1; //想要的行数
          -webkit-box-orient: vertical;
        }
        .neir_css:nth-child(2n) {
          margin-left: 10rpx;
        }
        .neir_css:nth-child(2n-1) {
          margin-right: 10rpx;
        }
      }
    }
  }

  .li:last-child {
    border-bottom: 0rpx solid #e0e0e0;
  }
}

.hui {
  position: fixed;
  right: 30rpx;
  bottom: 154rpx;
  display: flex;
  align-items: center;
  padding: 10rpx 20rpx;
  background-color: #fff;
  border-radius: 34rpx;
  font-size: 26rpx;
  box-shadow: 0px 0px 36rpx rgba(0, 0, 0, 0.16);

  image {
    width: 46rpx;
    height: 46rpx;
    margin-right: 18rpx;
  }
}

.down {
  height: 60rpx;
  line-height: 60rpx;
  // border-top: 2rpx solid #d0d0d0;
  text-align: center;
}
</style>
